<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <NavBar />
    
    <!-- 背景装饰 -->
    <div class="background-decoration" :style="backgroundStyle"></div>
    
    <!-- 动态内容区域 -->
    <div class="dynamic-content">
      <!-- 首页内容 -->
      <transition name="page-fade">
        <div v-show="currentPage === 'home'" class="page-content">
          <HomePage />
        </div>
      </transition>
      
      <!-- 技能页面内容 -->
      <transition name="page-fade">
        <div v-show="currentPage === 'skills'" class="page-content">
          <SkillsPage />
        </div>
      </transition>
      
      <!-- 进化页面内容 -->
      <transition name="page-fade">
        <div v-show="currentPage === 'evolution'" class="page-content">
          <EvolutionPage />
        </div>
      </transition>
      
      <!-- 道具页面内容 -->
      <transition name="page-fade">
        <div v-show="currentPage === 'items'" class="page-content">
          <ItemsPage />
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { ref, provide, computed } from 'vue'
import NavBar from '@/components/NavBar.vue'
import HomePage from '@/components/HomePage.vue'
import SkillsPage from '@/components/SkillsPage.vue'
import EvolutionPage from '@/components/EvolutionPage.vue'
import ItemsPage from '@/components/ItemsPage.vue'

// 当前显示的页面
const currentPage = ref('home')

// 页面切换方法
const switchPage = (pageKey) => {
  currentPage.value = pageKey
  console.log('切换到页面:', pageKey)
}

// 动态背景样式计算
const backgroundStyle = computed(() => {
  console.log('🎨 当前页面:', currentPage.value)
  
  const baseStyle = {
    transition: 'all 0.5s ease-in-out'
  }
  
  let backgroundImage = ''
  switch (currentPage.value) {
    case 'home':
      backgroundImage = "url('/backgrounds/bk01.jpeg')"
      break
    case 'skills':
      backgroundImage = "url('/backgrounds/bk03.jpeg')"
      break
    case 'evolution':
      backgroundImage = "url('/backgrounds/bk09.jpg')"
      break
    case 'items':
      backgroundImage = "url('/backgrounds/bk07.jpeg')"
      break
    default:
      backgroundImage = "url('/backgrounds/bk01.jpeg')"
  }
  
  console.log('🖼️ 背景图片:', backgroundImage)
  
  return { 
    ...baseStyle, 
    backgroundImage, 
    backgroundSize: 'cover', 
    backgroundPosition: 'center', 
    backgroundRepeat: 'no-repeat' 
  }
})

// 向子组件提供页面切换方法和当前页面状态
provide('switchPage', switchPage)
provide('currentPage', currentPage)
</script>

<style scoped>
.home-container {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 背景装饰 */
.background-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.background-decoration::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.5s ease-in-out;
  background: rgba(0, 0, 0, 0.12);
}

/* 动态内容区域 */
.dynamic-content {
  position: relative;
  z-index: 1;
  backdrop-filter: blur(8px);
  min-height: calc(100vh - 70px); /* 减去导航栏高度 */
  transition: all 0.5s ease-in-out;
  background: rgba(255, 255, 255, 0.9);
}

.page-content {
  width: 100%;
  min-height: calc(100vh - 70px);
}



/* 页面切换动画 */
.page-fade-enter-active,
.page-fade-leave-active {
  transition: all 0.5s ease-in-out;
}

.page-fade-enter-from,
.page-fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}



/* 动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dynamic-content {
    min-height: calc(100vh - 60px); /* 移动端导航栏可能更矮 */
  }
  
  .page-content {
    min-height: calc(100vh - 60px);
  }
}
</style>